Modules

The .module class is a basic building block for grouping content in the admin. It's generally applied to a div or a fieldset. It wraps the content group in a box and applies certain styles to the elements within. An h2 within a div.module will align to the top of the div as a header for the whole group.

Column Types

The base template for each admin page has a block that defines the column structure for the page. This sets a class on the page content area (div#content) so everything on the page knows how wide it should be. So far there are three options available, and one special hybrid option.

colM

This is the default column setting for all pages. The "M" stands for "main". Assumes that all content on the page is in one main column (div#content-main).

colMS

This is for pages with one main column and a sidebar on the right. The "S" stands for "sidebar". Assumes that main content is in div#content-main and sidebar content is in div#content-related. This is used on the main admin page.

colSM

Same as above, with the sidebar on the left. The source order of the columns doesn't matter.

colM superwide

This is for ridiculously wide pages. Doesn't really work very well for anything but colM. With superwide, you've got 1000px to work with. Don't waste them.

flex

This is for liquid-width pages, such as changelists. Currently only works with single-colum pages (does not combine with .colMS or .colSM). Form pages should never use .flex.

For instance, you could stick this in a template to make a superwide page:

{% block coltype %}colM superwide{% endblock %}

or this to make a liquid-width page (note that flex replaces colM, so both classes are not required):

{% block coltype %}flex{% endblock %}

Widths

There's a whole mess of classes in the stylesheet for custom pixel widths on objects. They come in handy for tables and table cells, if you want to avoid using the width attribute. Each class sets the width to the number of pixels in the class, except .xfull which will always be the width of the column it's in. (This helps with tables that you want to always fill the horizontal width, without using width="100%" which makes IE 5's box model cry.)

Note: Within a .flex page, the .xfull class will usually set to 100%, but there are exceptions and still some untested cases.

Available width classes:

.x50 .x75 .x100 .x150 .x200 .x250 .x300 .x400 .x500 .xfull

Text Styles

Object Tools

Certain actions which apply directly to an object are used in form and changelist pages. These appear in a "toolbar" row above the form or changelist, to the right of the page. The tools are wrapped in a ul with the class object-tools. There are two custom tool types which can be defined with an additional class on the a for that tool. These are .addlink and .viewsitelink.

Example from a changelist page:

<ul class="object-tools">
      <li><a href="/stories/add/" class="addlink">Add redirect</a></li>
     </ul>

and from a form page:

<ul class="object-tools">
 <li><a href="/history/303/152383/">History</a></li>
 <li><a href="/r/303/152383/" class="viewsitelink">View on site</a></li>
</ul>

Form Styles

Form Rows

Each row of the form (within the fieldset) should be enclosed in a div with class form-row. If the field in the row is required, a class of required should also be added to the div.form-row.